<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./dist/include-openlayers-local.js'></script>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>

    <!-- <script src="https://lib.baomitu.com/FileSaver.js/2.0.5/FileSaver.js"></script> -->
    <script crossorigin="anonymous" integrity="sha384-2Zlm4Dq0mt3GzI0SVJLidt83GAisHCQxa72b2Pwv7tmgi2jEIFIXehI5H7TW8SCM" src="https://lib.baomitu.com/jspdf/0.9.0rc1/jspdf.js"></script>

</head>
<body>
    <button id="export-pdf">下载地图</button>
    <div id="map"></div>
    <script>

            // 矢量图层
            var gaodeMapLayer = new ol.layer.Tile({
            title: "高德地图矢量图层",
            source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false,
            crossOrigin: "Anonymous"
            })
            });

            // 影像图层
            var image = new ol.layer.Tile({
            title: "高德地图影像图层",
            source: new ol.source.XYZ({
                url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
                wrapX: false,
                crossOrigin: "Anonymous"

            })
            })

            // 注记图层
            var zhuji = new ol.layer.Tile({
            title: "高德地图影像注记图层",
            source: new ol.source.XYZ({
                url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
                wrapX: false,
                crossOrigin: "Anonymous"
            })
            })

            var docLayer = new Zondy.Map.Doc('','test',{
                    ip:"localhost",
                    port:6163,
                    crossOrigin: "Anonymous"
                })

            const map = new ol.Map({
                target:'map',
                layers: [gaodeMapLayer,image,zhuji,docLayer],
                view:new ol.View({
                    center:[113,30],
                zoom:3,
                projection:'EPSG:4326'
                })
               

            })

            var dims = {
            a0: [1189, 841],
            a1: [841, 594],
            a2: [594, 420],
            a3: [420, 297],
            a4: [297, 210],
            a5: [210, 148]
        };

            var exportButton = document.getElementById('export-pdf');
            exportButton.addEventListener('click', function () {

            exportButton.disabled = true;
            // document.body.style.cursor = 'progress';

            var format = "a4"
            var resolution = 72
            var dim = dims[format];
            var width = Math.round(dim[0] * resolution / 25.4);
            var height = Math.round(dim[1] * resolution / 25.4);
            var size = /** @type {ol.Size} */ (map.getSize());
            var extent = map.getView().calculateExtent(size);

            var source = gaodeMapLayer.getSource();


            map.once('postcompose', function (event) {
                var canvas = event.context.canvas;
                var data = canvas.toDataURL('image/jpeg');
                var pdf = new jsPDF('landscape', undefined, format);
                pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
                pdf.save('map.pdf');
                // source.on('tileloadstart', tileLoadStart);
                // source.on('tileloadend', tileLoadEnd, event.context.canvas);
                // source.on('tileloaderror', tileLoadEnd, event.context.canvas);
            });

            map.setSize([width, height]);
            map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
            map.renderSync();
            exportButton.disabled = false;
            document.body.style.cursor = 'auto';

            }, false);
                

       
    </script>
</body>
</html>